// @import './iconfont.css';

.test {
  // 可以通过 @apply 多个样式封装整体样式
  @apply mt-4 ml-4;

  padding-top: 4px;
  color: red;
}

:root,
page {
  // 修改按主题色
  // --wot-color-theme: #37c2bc;

  // 修改按钮背景色
  // --wot-button-primary-bg-color: green;

  // 用于一级重要信息，标题文字、关键功能操作入口
  --color1: #070b1a;
  // 用于菜单面板图标及文字，底Bar功能项图标及文字
  --color2: #2e3033;
  // 用于二级页重要功能操作入口，如tab栏可选项、titlebar功能
  --color3: #5c6066;
  // 用于次要信息、辅助功能，如提示说明文字
  --color4: #8a8f99;
  // 用于非重要信息，若引导文章、最弱一级文字
  --color5: #c2c5cc;
  --bgc1: #dfe3e6;
  --bgc2: #e6ecf0;
  --bgc3: #edf3f7;
  --bgc4: #f1f1f1;
  --bgc5: #ffffff;

  // 状态色
  --sc1: #1f2026;
  --sc11: rgba(31, 32, 38, 0.1);
  --sc2: #ff5940;
  --sc21: rgba(255, 89, 64, 0.2);
  --sc3: #ffaa00;
  --sc31: rgba(255, 170, 0, 0.2);
  --sc4: #07c160;
  --sc41: rgba(7, 193, 96, 0.2);

  font-weight: 500;
}

.active {
  transition: opacity 0.2s;
  &:active {
    opacity: 0.7;
  }
}

// 日期选择器样式
.custom-calendar {
  --wot-calendar-active-color: var(--color1);
  --wot-button-primary-bg-color: var(--sc1);
  --wot-calendar-range-color: var(--sc11);
  --wot-action-sheet-color: var(--color1);
  --wot-button-medium-height: 78rpx;
  --wot-button-medium-fs: 30rpx;
  .is-start .wd-month__day-container {
    border-radius: 20rpx 0 0 20rpx !important;
  }
  .is-end .wd-month__day-container {
    border-radius: 0 20rpx 20rpx 0 !important;
  }
  .wd-calendar__range-label-item {
    color: var(--color1);
  }
}

.custom-search-input {
  width: 100%;
  height: 100%;
  background: transparent !important;
  .wd-input__body,
  .wd-input__value {
    height: 100%;
  }
  .wd-input__value {
    padding: 0 20rpx;
  }
  .wd-input__clear {
    background: transparent;
  }
}

.custom-button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 92rpx;
  font-size: 30rpx;
  font-weight: 600;
  color: #fff;
  background: var(--color1);
  border-radius: 50rpx;
  box-shadow: 0px 17rpx 28rpx rgba(#1f2026, 0.3);
  transition: opacity 0.2s;
  &:active,
  &.button-hover {
    color: #fff;
    background: var(--color1);
    opacity: 0.7;
  }
  &.disabled {
    background-color: rgba(#1f2026, 0.3);
  }

  &.hollow {
    color: #1f2026;
    background-color: #fff;
    border: 1rpx solid #1f2026;
    box-shadow: none;
  }
}

.custom-tabs {
  position: relative;
  z-index: 10;
  width: 100vw;
  height: 92rpx;
  background-color: #fff;
  --wot-tabs-nav-fs: 27rpx;
  --wot-tabs-nav-height: 92rpx;
  .wd-tabs__nav-item {
    padding-top: 16rpx;
    font-size: 27rpx !important;
    line-height: normal !important;
    transition: all 0.2s !important;
  }
  .wd-tabs__nav-item.is-active {
    font-size: 30rpx !important;
    font-weight: 600 !important;
  }
  .wd-tabs__line {
    bottom: -22rpx !important;
    width: 108rpx !important;
    height: 76rpx !important;
    margin-left: -32rpx;
    background: url('/static/images/icon/line.png') 0 0 no-repeat !important;
    background-size: 100% 100% !important;
  }
}

.custom-index-tabs {
  background-color: transparent !important;
  .wd-tabs__nav {
    background-color: transparent !important;
  }
  .wd-tabs__line {
    background: linear-gradient(
      134.53deg,
      rgba(113, 113, 117, 1) 0%,
      rgba(31, 32, 38, 1) 100%
    ) !important;
    border-radius: 3px !important;
  }

  // 隐藏tab滚动条
  .wd-tabs__nav--wrap {
    .uni-scroll-view::-webkit-scrollbar {
      display: none;
    }
    .uni-scroll-view {
      -moz-scrollbars: none;
      scrollbar-width: none;
    }
  }
}

// 表单
.custom-form {
  margin-bottom: 28rpx;
  overflow: hidden;
  background-color: #fff;
  border-radius: 30rpx;
  .wd-cell {
    display: flex;
    align-items: center;
    height: 112rpx;
    padding: 0 23rpx;
    .wd-cell__wrapper {
      align-items: center;
      width: 100%;
      padding: 0;
    }
    .wd-cell__left {
      flex: none;
      width: 180rpx;
      margin-right: 0;
      font-size: 30rpx;
      color: var(---color1);
      .wd-cell__title {
        font-size: 30rpx;
        color: var(---color1);
      }
    }
    .wd-cell__right {
      flex: 1;
      .wd-input::after {
        display: none;
      }
      .uni-input-placeholder {
        --wot-input-placeholder-color: var(--color4);
      }
    }
  }
}

// 表单样式2
.custom-form2 {
  .wd-cell {
    --wot-cell-padding: 0;
    --wot-cell-wrapper-padding: 0;
    --wot-cell-title-fs: 27rpx;
    --wot-cell-title-color: var(--color1);
    @include border-bottom(var(--bgc2));
    padding: 0 !important;
    .wd-cell__wrapper {
      align-items: center;
      height: 120rpx;
    }
    .uni-input-wrapper {
      text-align: right;
    }
    .wd-input {
      &::after {
        display: none;
      }
    }
  }
  .vertical-cell {
    padding-top: 32rpx !important;
    &.no-border {
      @include border-bottom(transparent);
    }
    .wd-cell__wrapper {
      height: auto;
      .wd-textarea {
        @include hairline('all', var(--bgc2), 26rpx);
      }
      .wd-textarea__value {
        padding-right: 0;
      }
      .wd-cell__right {
        margin-top: 13rpx !important;
      }
    }
  }
}

.wd-checkbox__txt {
  line-height: 1;
}
